<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>6-transition案例</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none;
			}
			body{
				font-family: "microsoft yahei";
			}
			.box{
				width:300px;
				height:225px;
				margin:30px auto;
			}
			.box a{
				width:300px;
				height:225px;
				display: block;
				box-shadow:6px 6px 3px 0px #ccc;
				position: relative;
			}
			/* 默认状态 */
			div.city{
				height:0px;
				line-height:50px;
				text-align: center;
				width:300px;
				background:rgba(0,0,0,.5);
				color:#fff;
				position: absolute;
				left:0;
				bottom:0;
				/* 过渡元素本身 */
				transition: all 0.4s; 
			}
			/* 改变状态 */
			.box a:hover .city{
				height:50px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<a href="">
				<img src="images/city.jpg" alt="">
				<div class="city">寻找城市之光</div>
			</a>
		</div>
	</body>
</html>
